<!DOCTYPE html>
<html>
<head>
    <title>Infinite Nested Squares Circuit</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Center coordinates
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;

        // Size parameter for the outermost square (half of the diagonal length)
        let L = 180;

        // --- Drawing the squares ---

        // Function to draw a diamond (rotated square)
        function drawDiamond(l) {
            ctx.beginPath();
            ctx.moveTo(cx, cy - l); // Top vertex
            ctx.lineTo(cx - l, cy); // Left vertex
            ctx.lineTo(cx, cy + l); // Bottom vertex
            ctx.lineTo(cx + l, cy); // Right vertex
            ctx.closePath();
            ctx.stroke();
        }

        // Function to draw an axis-aligned square
        function drawSquare(halfSide) {
            ctx.beginPath();
            ctx.rect(cx - halfSide, cy - halfSide, halfSide * 2, halfSide * 2);
            ctx.stroke();
        }
        
        // Draw the sequence of nested squares
        // 1. Outermost diamond (ABCD)
        let l_diag = L;
        drawDiamond(l_diag);
        let s1_top = { x: cx, y: cy - l_diag };
        let s1_left = { x: cx - l_diag, y: cy };
        let s1_bottom = { x: cx, y: cy + l_diag };
        let s1_right = { x: cx + l_diag, y: cy };

        // 2. First inscribed square (EFGH)
        let l_halfside = l_diag / 2;
        drawSquare(l_halfside);
        let s2_tl = { x: cx - l_halfside, y: cy - l_halfside };
        let s2_bl = { x: cx - l_halfside, y: cy + l_halfside };
        let s2_br = { x: cx + l_halfside, y: cy + l_halfside };
        let s2_tr = { x: cx + l_halfside, y: cy - l_halfside };

        // 3. Second inscribed diamond
        l_diag = l_halfside;
        drawDiamond(l_diag);
        let s3_top = { x: cx, y: cy - l_diag };
        let s3_bottom = { x: cx, y: cy + l_diag };
        
        // 4. Third inscribed square
        l_halfside = l_diag / 2;
        drawSquare(l_halfside);

        // 5. Innermost dashed lines
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.setLineDash([6, 4]);
        ctx.beginPath();
        ctx.moveTo(cx - l_halfside, cy);
        ctx.lineTo(cx + l_halfside, cy);
        ctx.moveTo(cx, cy - l_halfside);
        ctx.lineTo(cx, cy + l_halfside);
        ctx.stroke();
        ctx.restore();

        // --- Drawing the labels ---
        ctx.fillStyle = 'black';
        
        // Labels for the outermost square
        ctx.fillText('A', s1_top.x, s1_top.y - 20);
        ctx.fillText('B', s1_left.x - 20, s1_left.y);
        ctx.fillText('C', s1_bottom.x, s1_bottom.y + 20);
        ctx.fillText('D', s1_right.x + 20, s1_right.y);

        // Labels for the inner squares
        ctx.fillText('E', s2_tl.x - 15, s2_tl.y - 5);
        ctx.fillText('F', s2_bl.x - 15, s2_bl.y + 15);
        ctx.fillText('G', s2_br.x + 15, s2_br.y + 15);
        
        // H is between the top-right vertex of square 2 and top vertex of diamond 3
        ctx.fillText('H', s2_tr.x - 20, s2_tr.y - 10);
        
        // I is near the bottom vertex of diamond 3
        ctx.fillText('I', s3_bottom.x, s3_bottom.y + 20);

    </script>
</body>
</html>